<template>
    <div class="index_model">
        <!-- 左侧栏 -->
        <div class="left_panel">
            <div class="file_title">
                <span class="lt">文档</span>
                <span class="rt">&lt;</span>
            </div>
            <div class="file_tab">
                <ul>
                    <li class="tab" v-for="(tab,index) in tabList" :key="index" @click="toggle(index,tab.view)" :class="{active:activeIndex == index}">
                        <i :class="tab.type"></i>{{tab.name}}
                        <div class="tBlock" v-if="index==2"></div>

                    </li>
                </ul>
            </div>
        </div>
        <!-- 右侧栏 -->
        <div class="right_panel">
            <component :is="currentView"></component>
        </div>
    </div>
</template>

<script>
import alldoc from './component/alldoc.vue';
import mydoc from './component/mydoc.vue';
import myshare from './component/myshare.vue';
import trash from './component/trash.vue';
export default {
    data() {
        return {
            activeIndex: 0,
            currentView : 'alldoc',
            tabList: [
                {
                    name: '所有文档',
                    type: 'el-icon-s-order',
                    view: 'alldoc'
                },
                {
                    name: '我的文档',
                    type: 'el-icon-folder-opened',
                    view: 'mydoc'
                },
                {
                    name: '与我共享',
                    type: 'el-icon-share',
                    view: 'myshare'
                },
                {
                    name: '回收站',
                    type: 'el-icon-delete',
                    view: 'trash'
                },
            ]
        }
    },
    components:{
        alldoc,
        mydoc,
        myshare,
        trash
    },
    methods: {
        toggle(index, view){
            this.activeIndex = index;
            this.currentView = view;
        }
    },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>

